<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="sBrand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="sBrand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
                <el-option label="无" value="null"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="sBrand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="sBrand.brandName"placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="delByIds()">批量删除</el-button>
        <el-button type="primary" plain @click="resetForm()">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="添加品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="aBrand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="aBrand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="aBrand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="aBrand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="aBrand.description"></el-input>
            </el-form-item>


            <el-form-item label="状态">
                <el-switch v-model="aBrand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addBrand()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--展示表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
                <template slot-scope="scope">
                    <el-status v-if="scope.row.status == 1">启用</el-status>
                    <el-status v-if="scope.row.status == 0">禁用</el-status>
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="updateBrand(scope.row)">修改</el-button>
                        <el-button type="danger" @click="delbrand(scope.row.id)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <!--修改数据对话框表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialogVisible2"
            width="30%">

        <el-form ref="form" :model="uBrand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="uBrand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="uBrand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="uBrand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="uBrand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="uBrand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="udBrand()">提交</el-button>
                <el-button @click="dialogVisible2 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
    </el-pagination>

</div>


<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.onSubmit();
            /*var _this = this
            axios.get("http://localhost:8080/brand-case/SelectAllServlet")
                .then(resp => {
                    _this.tableData = resp.data;
                })*/
        },
        methods: {
            //重置新增表单
            resetForm(){
                this.dialogVisible = true;
                this.aBrand={status:0};
            },

            //查询所有数据
            selectAll() {
                axios.get("/brands")
                    .then(resp => {
                        this.tableData = resp.data;
                    })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                //console.log(this.multipleSelection)
            },

            // 添加数据
            addBrand() {
                this.dialogVisible = false;
                axios.post("/brands", this.aBrand)
                    .then(resp => {
                        if (resp.data.flag) {
                            this.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            this.onSubmit();
                        } else {
                            this.$message({
                                message: resp.data.msg,
                                type: 'error'
                            });
                        }
                    })
                //console.log(this.brand);
            },

            //删除数据
            delbrand(id) {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/brands/"+id)
                        .then(resp => {
                            if (resp.data.flag) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.onSubmit();
                            } else {
                                this.$message({
                                    message: resp.data.msg,
                                    type: 'error'
                                });
                            }
                        });
                })
            },

            // 修改方法
            updateBrand(row) {
                this.dialogVisible2 = true;
                this.uBrand.id = row.id;
                this.uBrand.brandName = row.brandName;
                this.uBrand.companyName = row.companyName;
                this.uBrand.ordered = row.ordered;
                this.uBrand.description = row.description;
                this.uBrand.status = row.status + "";
                //console.log(i);
            },

            udBrand() {
                axios.put("/brands", this.uBrand)
                    .then(resp => {
                        if (resp.data.flag) {
                            this.dialogVisible2 = false;
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.onSubmit();
                        }
                    })
            },

            //批量删除
            delByIds() {
                var brands = this.multipleSelection;
                var ids = this.ids;
                for (let i = 0; i < brands.length; i++) {
                    ids[i] = brands[i].id;
                }
                this.$confirm('此操作将批量删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/brands/deleteByIds", ids)
                        .then(resp => {
                            if (resp.data.flag) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.onSubmit();
                            }
                        });
                })
            },
            //分页查询
            selectPage(){
                axios.get("/brands/selectPage?index="+this.currentPage+"&pageSize="+ this.pageSize)
                    .then(resp=>{
                        this.tableData = resp.data.data.list;
                        this.pageCount = resp.data.data.pageCount;
                    })
            },
            //改变分页执行方法
            handleSizeChange(val) {
                this.pageSize = val;
                //console.log(`每页 ${val} 条`);
                this.onSubmit();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //console.log(`当前页: ${val}`);
                this.onSubmit();
            },
            //搜索
            onSubmit(){
                axios.post("/brands/selectByPageAndCondition?page="+this.currentPage+"&pageSize="+this.pageSize,this.sBrand)
                    .then(resp=>{
                        this.tableData=resp.data.data.list;
                        this.pageCount=resp.data.data.pageCount;
                    })
            }
        },
        data() {
            return {

                //总记录数
                pageCount:'',
                // 每页显示记录数
                pageSize: 5,
                // 当前页码
                currentPage: 1,
                // id数组
                ids: [],
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                // 添加数据对话框是否展示的标记
                dialogVisible2: false,

                // 添加品牌模型数据
                aBrand: {
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: "",
                    description: "",
                    status: ''
                },
                // 修改品牌模型数据
                uBrand: {
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: "",
                    description: "",
                    status: ''
                },
                //搜索品牌模型
                sBrand:{
                    brandName: '',
                    companyName: '',
                    status: ''
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    id: '',
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    status: ''
                }]
            }
        }
    })

</script>

</body>
</html>